<template>
  <div class="public-account-management app-main-content-box clearfix" v-loading="loading">
    <el-form label-width="120px" :model="tempObj" :rules="rules" ref="menuForm" v-if="!showNoAuth">
      <!--左边配置菜单-->
      <div class="left">
        <div class="menu clearfix">
          <draggable :list="menu" :options="{group:'menu'}">
            <div class="menu_bottom" v-for="(item, i) of menu" :key="i">
              <!-- 一级菜单 -->
              <div
                @click="menuFun(item,i)"
                class="menu_item"
                :class="{'active': isActive == i}"
              >{{item.name}}</div>
              <!--以下为二级菜单-->
              <div class="submenu" v-if="isSubMenuFlag == i">
                <draggable :list="item.subButtons" :options="{group:'subButtons'}">
                  <div class="subtitle" v-for="(subItem, k) in item.subButtons" :key="k">
                    <div
                      class="menu_subItem"
                      :class="{'active': isSubMenuActive == i + '' +k}"
                      @click="subMenuFun(item, subItem, i, k)"
                    >{{subItem.name}}</div>
                  </div>
                </draggable>
                <!--  二级菜单加号， 当长度 小于  5 或 只有一级菜单才显示二级菜单的加号  -->
                <div
                  class="menu_bottom menu_addicon"
                  v-if="!item.hasOwnProperty('subButtons')||item.subButtons.length < 5"
                  @click="addSubMenu(item)"
                >
                  <i class="el-icon-plus"></i>
                </div>
              </div>
            </div>
          </draggable>
          <!-- 一级菜单加号 -->
          <div class="menu_bottom menu_addicon" v-if="menuKeyLength < 3" @click="addMenu">
            <i class="el-icon-plus"></i>
          </div>
        </div>
        <div class="save_btn">
          <p>可直接拖拽菜单排序</p>
          <el-button type="primary" size="small" @click="publicMenuByData">载入保存的配置</el-button>
          <el-button type="primary" size="small" @click="saveMenuButtons('save')">保存当前的配置</el-button>
          <el-button type="primary" size="small" @click="publicMenuByWechat">同步公众号菜单</el-button>
          <el-button type="primary" size="mini" @click="saveMenuButtons('update')">发布公众号菜单</el-button>
        </div>
      </div>

      <!--右边配置-->
      <div v-if="!showRightFlag" class="right">
        <div class="configure_page">
          <div class="right_btn">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteMenu(tempObj)"
            >删除当前菜单</el-button>
          </div>

          <!-- 菜单名称 -->
          <div class="menu_content">
            <el-form-item label="菜单名称：">
              <el-input clearable v-model="tempObj.name" placeholder="请输入菜单名称" @blur="blurMenuName"></el-input>
            </el-form-item>
            <el-form-item>
              <span v-if="tempObjNameTips&&isTips==0" style="color:red">字数超过上限</span>
              <span v-if="isTips==0">字数不超过4个汉字或8个字母</span>
              <span v-if="tempObjNameTips&&isTips==1" style="color:red">字数超过上限</span>
              <span v-if="isTips==1">字数不超过8个汉字或16个字母</span>
            </el-form-item>
          </div>

          <!-- 配置选项 -->
          <div v-if="showRightFlagOnlyName">
            <div class="menu_content">
              <el-form-item label="菜单内容：">
                <el-radio-group v-model="tempObj.type" size="mini">
                  <el-radio :label="'click'" border>发送消息</el-radio>
                  <el-radio :label="'view'" border>跳转链接</el-radio>
                  <el-radio :label="'miniprogram'" border>小程序</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>

            <!-- 内容展示 -->
            <div class="configur_content" v-if="tempObj.type">
              <div v-if="tempObj.type == 'click'">
                <!--下面点击“选择素材”按钮，弹框-->
                <div>
                  <el-button type="primary" round size="small" @click="openDialogMaterial">选择素材</el-button>
                </div>
                <!-- 文本消息详情 -->
                <div v-if="materialType=='text'" class="material-info">
                  <el-form-item label="文本消息内容：">{{materialContentByKey}}</el-form-item>
                </div>
                <!-- 图文消息详情  -->
                <div v-if="materialType=='article'" class="material-info">
                  <el-form-item label="图文消息标题：">{{materialContentByKey.title}}</el-form-item>
                  <el-form-item label="图文消息描述：">{{materialContentByKey.description}}</el-form-item>
                  <el-form-item label="图文跳转链接：">{{materialContentByKey.url}}</el-form-item>
                  <el-form-item label="图文消息封面：">
                    <div class="material-img" v-if="materialContentByKey.picUrl">
                      <img :src="materialContentByKey.picUrl" alt />
                    </div>
                  </el-form-item>
                </div>
                <!-- 暂未有key  -->
                <p v-if="!tempObj.key" class="material-info-nothing">未设置消息内容</p>
              </div>
              <!-- 获取用户输入的跳转链接 -->
              <div v-if="tempObj.type == 'view'">
                <el-form-item label="跳转网页：" prop="url">
                  <el-input v-model="tempObj.url" placeholder="请输入网页链接" clearable></el-input>
                </el-form-item>
              </div>
              <!-- 获取用户输入的小程序 -->
              <div v-if="tempObj.type == 'miniprogram'">
                <el-form-item label="appid：">
                  <el-input v-model="tempObj.appid" placeholder="请输入小程序的appid" clearable></el-input>
                </el-form-item>
                <el-form-item label="页面路径：">
                  <el-input
                    v-model="tempObj.pagepath"
                    placeholder="请输入小程序的页面路径，如：pages/index"
                    clearable
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--菜单未编辑状态-->
      <div v-if="showRightFlag" class="right no-weixin-menu">点击左侧菜单进行编辑操作</div>
    </el-form>
    <!--素材弹框-->
    <dialog-material ref="dialogMaterial"></dialog-material>

    <!-- 未授权公众号 -->
    <wx-auth-tips v-if="showNoAuth" source="public"></wx-auth-tips>
  </div>
</template>
<script>
  import { mapActions } from "vuex";
  import draggable from "vuedraggable";
  import DialogMaterial from "./components/DialogMaterial.vue";
  import { validateImgUrl } from "@/utils/validate.js";
  import {
    getPublicMenuByData, // 获取数据库菜单
    getPublicMenuByWechat, // 同步公众号菜单
    getMaterialByKey, // 通过key获取对应数据
    setKeyByMaterial, // 映射素材返回key
    savePublicMenu // 保存菜单
  } from "@/api/wechat.js";
  export default {
    name: "PublicMenu",
    components: { draggable, DialogMaterial },
    data() {
      /**
       * 表单校验方法相关
       */
      //网页链接规则
      const validateUrl = (rule, value = "", callback) => {
        if (value === "") {
          callback(new Error("请输入网页链接"));
        } else if (!validateImgUrl(value)) {
          callback(new Error("输入不符规则,请输入网页链接"));
        } else {
          callback();
        }
      };
      return {
        /**
         * 表单校验字段相关
         */
        rules: {
          url: [{ validator: validateUrl, trigger: "blur" }],
          text: [
            {
              required: true,
              message: "请输入文本消息内容",
              trigger: ["blur", "change"]
            }
          ]
        },
        isActive: -1, // 一级菜单点中样式
        isSubMenuActive: -1, // 一级菜单点中样式
        isSubMenuFlag: -1, // 二级菜单显示标志
        isTips: 0, // 二级菜单显示标志
        tempObj: {
          type: "view", // 类型
          name: "", // 菜单名称
          material: "", // 素材名称
          link: "" // 跳转链接
        },
        tempSelfObj: {
          grand: "", // 1:表示一级菜单； 2:表示二级菜单
          index: "", // 表示一级菜单索引
          secondIndex: "" // 表示二级菜单索引
        },
        // 状态
        loading: false,
        showNoAuth: false, // 是否授权
        showRightFlag: true, // 右边配置显示隐藏
        showRightFlagOnlyName: true, // 已添加子菜单，仅显示菜单名称
        // 数据
        menu: [], // 横向菜单
        materialContentByKey: "", // 根据key获取的映射内容
        materialType: "" // 素材类型 文本text 图文article
      };
    },
    computed: {
      // menuObj的长度，当长度小于3才显示一级菜单的加号
      menuKeyLength: function() {
        return this.menu.length;
      },

      tempObjNameTips: function() {
        if (this.isTips == 0) {
          return this.limitDo(this.tempObj.name, 8, false);
        }
        if (this.isTips == 1) {
          return this.limitDo(this.tempObj.name, 16, false);
        }
      }
    },
    mounted() {
      this.checkAuth();
    },
    methods: {
      /**
       * 获取数据
       */
      ...mapActions(["getAuthMp"]),
      // 检验是否授权了
      checkAuth() {
        this.getAuthMp().then(() => {
          this.$store.state.wechat.mpInfo.default.appId
            ? this.publicMenuByData()
            : (this.showNoAuth = true);
        });
      },

      //获取当前保存的菜单
      publicMenuByData() {
        getPublicMenuByData().then(res => {
          this.menu = JSON.parse(res.data.menu);
          this.showRightFlag = true;
        });
      },

      /**
       * 按钮组
       */

      //同步当前的微信实时菜单
      publicMenuByWechat() {
        getPublicMenuByWechat().then(res => {
          this.menu = res.data;
          this.showRightFlag = true;
        });
      },

      //保存/发布菜单
      saveMenuButtons(type) {
        let button = this.menu;
        let buttonflag = false;
        for (var i = 0; i < button.length; i++) {
          if (buttonflag) {
            break;
          }
          // 没有二级菜单  一级必须有type
          if (
            !button[i].hasOwnProperty("subButtons") ||
            button[i].subButtons.length == 0
          ) {
            if (!button[i].hasOwnProperty("type")) {
              this.menuFun(button[i], i);
              this.menuEmptyWarn();
              buttonflag = true;
              break;
            } else {
              let resultItem = this.submitValidateMenu(button[i], i);
              if (!resultItem.flag) {
                button[i] = resultItem.data;
              } else {
                buttonflag = true;
              }
            }
          } else {
            // 遍历二级菜单
            for (var j = 0; j < button[i].subButtons.length; j++) {
              if (!button[i].subButtons[j].hasOwnProperty("type")) {
                this.subMenuFun(button[i], button[i].subButtons[j], i, j);
                this.menuEmptyWarn();
                buttonflag = true;
                break;
              } else {
                let resultsuBItem = this.submitValidateMenu(
                  button[i].subButtons[j],
                  i,
                  button[i],
                  j
                );
                if (!resultsuBItem.flag) {
                  button[i].subButtons[j] = resultsuBItem.data;
                } else {
                  buttonflag = true;
                }
              }
            }
          }
        }

        //菜单遍历筛选清除多余匹配正则完毕后发送提交
        if (
          button.length == 0 ||
          (!buttonflag &&
            button.length == i &&
            (!button[i - 1].hasOwnProperty("subButtons") ||
              j == button[i - 1].subButtons.length))
        ) {
          // type 类型是save时候是保存配置
          if (type == "save") {
            this.$confirm("保存当前配置会覆盖原版本，确认保存？", "保存确认", {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              type: "warning",
              center: true,
              roundButton: true
            }).then(() => {
              this.loading = true;
              savePublicMenu(button)
                .then(res => {
                  this.showRightFlag = true;
                  this.menu = button;
                  this.loading = false;
                  this.$notify({
                    title: "成功",
                    message: "更新成功",
                    type: "success",
                    duration: 2000,
                    offset: 40
                  });
                })
                .catch(err => {
                  this.loading = false;
                });
            });
          }
          // type 类型是update时候是发布更新配置
          if (type == "update") {
            this.$confirm(
              "发布成功后会覆盖原版本，且将在24小时内对所有用户生效，确认发布？",
              "发布确认",
              {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning"
              }
            ).then(() => {
              let loadingInstance = this.$loading({
                lock: true,
                text: "发布中",
                background: "rgba(0, 0, 0, 0.7)"
              });
              savePublicMenu(button).then(res => {
                this.showRightFlag = true;
                this.menu = button;
                this.$nextTick(() => {
                  loadingInstance.close();
                });
                this.$message({
                  type: "success",
                  message: "发布成功!"
                });
              });
            });
          }
        }
      },

      // 提交对象验证数据的正确性
      submitValidateMenu(data, i, item = "", j = "") {
        let _this = this;
        function isJ(type) {
          j === ""
            ? _this.menuFun(data, i, type)
            : _this.subMenuFun(item, data, i, j, type);
        }
        let flag = false;
        switch (data.type) {
          case "click":
            if (data.key == "" || !data.hasOwnProperty("key")) {
              this.menuEmptyWarn();
              isJ();
              flag = true;
            } else {
              data = this.typeRules(data);
            }
            break;
          case "view":
            if (data.url == "" || !data.hasOwnProperty("url")) {
              this.menuEmptyWarn();
              isJ("url");
              flag = true;
            } else {
              // 验证url
              data = this.typeRules(data);
              if (!validateImgUrl(data.url)) {
                this.menuValidateWarn();
                isJ("url");
                flag = true;
              }
            }
            break;
          case "miniprogram":
            if (
              data.appid == "" ||
              !data.hasOwnProperty("appid") ||
              data.url == "" ||
              !data.hasOwnProperty("url")
            ) {
              this.menuEmptyWarn();
              isJ();
              flag = true;
            } else {
              data = this.typeRules(data);
            }
            break;
        }
        return { flag, data };
      },

      // 传入对象匹配type规则删除多余数据
      typeRules(menu) {
        let newMenu = {};
        newMenu.name = menu.name;
        switch (menu.type) {
          // click对应的规则["name","key"]
          case "click":
            newMenu.type = menu.type;
            newMenu.key = menu.key;
            return newMenu;
            break;
          case "view":
            // view对应的规则["name","url"]
            newMenu.type = menu.type;
            newMenu.url = menu.url;
            return newMenu;
            break;
          case "miniprogram":
            // miniprogram规则["name","appid","pagepath"]
            newMenu.type = menu.type;
            newMenu.appid = menu.appid;
            newMenu.url = menu.url;
            newMenu.pagepath = menu.pagepath;
            return newMenu;
            break;
        }
      },

      // 菜单不能为空
      menuEmptyWarn() {
        this.$message({
          showClose: true,
          message: "菜单内容不能为空",
          type: "warning"
        });
      },

      // 正则错误提示
      menuValidateWarn() {
        this.$message({
          showClose: true,
          message: "菜单内容不符合规则",
          type: "warning"
        });
      },

      // 菜单编辑
      // 根据key去获取数据
      materialByKey(key) {
        getMaterialByKey(key).then(res => {
          switch (res.data.type) {
            case "text":
              this.materialType = "text";
              this.materialContentByKey = res.data.value;
              break;
            case "article":
              this.materialType = "article";
              this.materialContentByKey = res.data.value;
              break;
            default:
              break;
          }
        });
      },
      // 一级菜单点击事件
      menuFun(item, i, type = "") {
        let subMenuKeyLength = item.hasOwnProperty("subButtons")
          ? item.subButtons.length
          : 0;
        subMenuKeyLength == 0
          ? (this.showRightFlagOnlyName = true)
          : (this.showRightFlagOnlyName = false);
        this.showRightFlag = false; //右边菜单隐藏
        this.tempObj = item; // 这个如果放在顶部，flag会没有。因为重新赋值了。
        this.tempSelfObj.grand = "1"; // 表示一级菜单
        this.tempSelfObj.index = i; // 表示一级菜单索引
        this.isActive = i; // 一级菜单选中样式
        this.isSubMenuFlag = i; // 二级菜单显示标志
        this.isSubMenuActive = -1; // 二级菜单去除选中样式
        this.isTips = 0;
        this.textMessage = { text: "" }; // 重置文本消息内容
        this.materialID = ""; // 重置素材ID
        this.materialContentByKey = ""; // 根据key获取的映射内容
        this.materialType = ""; // 获取的映射类型
        // 如果有key 根据key获取数据
        if (
          item.hasOwnProperty("type") &&
          item.type == "click" &&
          item.hasOwnProperty("key") &&
          item.key.length != 0
        ) {
          this.materialByKey(item.key);
        }

        //点击校验
        this.clickValidateMenu(item, type);
      },

      // 二级菜单点击事件
      subMenuFun(item, subItem, index, k, type = "") {
        this.showRightFlagOnlyName = true; //可编辑显示
        this.showRightFlag = false; //右边菜单隐藏
        this.tempObj = subItem; //将点击的数据放到临时变量，对象有引用作用
        this.tempSelfObj.grand = "2"; //表示二级菜单
        this.tempSelfObj.index = index; //表示一级菜单索引
        this.tempSelfObj.secondIndex = k; //表示二级菜单索引
        this.isSubMenuFlag = index; //二级菜单显示标志
        this.isSubMenuActive = index + "" + k; //二级菜单选中样式
        this.isActive = -1; //一级菜单去除样式
        this.isTips = 1;
        this.textMessage = { text: "" }; //重置文本消息内容
        this.materialID = ""; //重置素材ID
        this.materialContentByKey = ""; //根据key获取的映射内容
        this.materialType = ""; //获取的映射类型

        // 如果有key 根据key获取数据
        if (
          subItem.hasOwnProperty("type") &&
          subItem.type == "click" &&
          subItem.hasOwnProperty("key") &&
          subItem.key.length != 0
        ) {
          this.materialByKey(subItem.key);
        }

        //点击校验
        this.clickValidateMenu(subItem, type);
      },

      // 点击校验正则提示
      clickValidateMenu(data, type) {
        if (type === "") {
          switch (data.type) {
            case "click":
              if (data.key == "" || !data.hasOwnProperty("key")) {
              } else {
              }
              break;
            case "view":
              setTimeout(() => {
                this.$refs.menuForm.validateField("url");
              }, 200);
              break;
            case "miniprogram":
              break;
          }
        } else {
          setTimeout(() => {
            this.$refs.menuForm.validateField(type);
          }, 200);
        }
      },

      // 添加横向一级菜单
      addMenu() {
        switch (this.menuKeyLength) {
          case 2:
            this.$set(this.menu, "2", {
              name: "主菜单"
            });
            break;
          case 1:
            this.$set(this.menu, "1", {
              name: "主菜单"
            });
            break;
          case 0:
            this.$set(this.menu, "0", {
              name: "主菜单"
            });
            break;
        }
      },

      // 添加横向二级菜单
      addSubMenu(item) {
        let subMenuKeyLength = item.hasOwnProperty("subButtons")
          ? item.subButtons.length
          : 0;
        switch (subMenuKeyLength) {
          case 4:
            this.$set(item.subButtons, "4", {
              name: "子菜单"
            });
            break;
          case 3:
            this.$set(item.subButtons, "3", {
              name: "子菜单"
            });
            break;
          case 2:
            this.$set(item.subButtons, "2", {
              name: "子菜单"
            });
            break;
          case 1:
            this.$set(item.subButtons, "1", {
              name: "子菜单"
            });
            break;
          case 0:
            this.$confirm(
              "添加子菜单后，主菜单的内容将被清除。确定添加子菜单？",
              "温馨提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            )
              .then(() => {
                //重置主菜单只有name
                for (var itemkey in item) {
                  if (itemkey != "name") {
                    this.$delete(item, itemkey);
                  }
                }
                this.$set(item, "subButtons", [
                  {
                    name: "子菜单"
                  }
                ]);
                //只可以设置菜单名
                this.showRightFlagOnlyName = false;
              })
              .catch(() => {});
            break;
        }
      },

      // 删除当前菜单
      deleteMenu(obj) {
        var _this = this;
        this.$confirm("删除后该菜单下设置的内容将被删除", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
          roundButton: true
        })
          .then(() => {
            _this.deleteData(); // 删除菜单数据
          })
          .catch(() => {});
      },

      // 删除菜单数据
      deleteData() {
        // 一级菜单的删除
        if (this.tempSelfObj.grand == "1") {
          this.menu.splice(this.tempSelfObj.index, 1);
        }
        // 二级菜单的删除
        if (this.tempSelfObj.grand == "2") {
          this.menu[this.tempSelfObj.index].subButtons.splice(
            this.tempSelfObj.secondIndex,
            1
          );
        }
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.showRightFlag = true;
        this.tempObj = {
          type: "",
          name: ""
        };
      },

      // 切换菜单时候如果当前菜单没有名称则自动添加默认菜单名,有名称则匹配
      blurMenuName(index) {
        if (this.tempObj.name.trim() == "") {
          if (this.tempSelfObj.grand == "1") {
            this.menu[this.tempSelfObj.index].name = "主菜单";
          }
          if (this.tempSelfObj.grand == "2") {
            this.menu[this.tempSelfObj.index].subButtons[
              this.tempSelfObj.secondIndex
            ].name = "子菜单";
          }
        } else {
          if (this.tempSelfObj.grand == "1") {
            this.limitDo(this.tempObj.name, 8, true);
          }
          if (this.tempSelfObj.grand == "2") {
            this.limitDo(this.tempObj.name, 16, true);
          }
        }
      },

      // 素材弹窗
      openDialogMaterial() {
        this.$refs.dialogMaterial.open().then(res => {
          this.tempObj.key = res;
          this.materialByKey(res);
        });
      },

      // 正则匹配规则
      limitDo(val, limit, isStr) {
        var len = function(val) {
          //获取字符串的字节长度
          val = String(val);
          var length = val.length;
          var hanzi = (val.match(/[^\x00-\xff]/g) || "").length;
          var num = length - hanzi;
          var fstr = hanzi * 2 + num;
          return fstr;
        };
        if (len(val) > limit && !isStr) {
          return true;
        }
        if (len(val) > limit && isStr) {
          while (len((val = val.substr(0, val.length - 1))) > limit);
          this.tempObj.name = val;
        }
      }
    }
  };
</script>
<!--本组件样式-->
<style rel="stylesheet/scss" lang="scss" scoped>
  .clearfix {
    *zoom: 1;
  }
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  div {
    text-align: left;
  }
  .public-account-management {
    min-width: 750px;
    padding: 20px 10px;
    .left {
      float: left;
      position: relative;
      margin-right: 20px;
      width: 290px;
      height: 600px;
      background: url("../../../assets/img/iphone_bg.png") no-repeat;
      background-size: 100% auto;
      padding: 473px 22px 80px;
      box-sizing: border-box;
      /*第一级菜单*/
      .menu {
        .menu_bottom {
          position: relative;
          float: left;
          box-sizing: border-box;
          width: 82px;
          text-align: center;
          background-color: #fafafa;
          border: 1px solid #ebedee;
          cursor: pointer;
          &.menu_addicon {
            height: 46px;
            line-height: 46px;
          }
          .menu_item {
            height: 44px;
            line-height: 44px;
            text-align: center;
            color: #616161;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            &:hover {
              color: #000;
            }
            &.active {
              border: 1px solid #44b549;
              color: #44b549;
            }
          }
          .menu_subItem {
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            &:hover {
              background-color: #eee;
            }
            &.active {
              border: 1px solid #44b549;
              color: #44b549;
            }
          }
        }
        i {
          color: #2bb673;
        }
        /*第二级菜单*/
        .submenu {
          position: absolute;
          width: 82px;
          bottom: 45px;
          .subtitle {
            background-color: #fafafa;
            box-sizing: border-box;
            margin-bottom: 2px;
          }
        }
      }
      .save_btn {
        position: absolute;
        bottom: -95px;
        left: 0;
        p {
          margin: 0;
          text-align: center;
          color: #f56c6c;
          font-weight: 600;
          font-size: 14px;
        }
        .el-button {
          float: left;
          margin: 10px 0 0 19px;
        }
      }
    }
    /*右边菜单内容*/
    .right {
      overflow: hidden;
      box-sizing: border-box;
      min-width: 420px;
      padding: 10px;
      min-height: 700px;
      -webkit-box-sizing: border-box;
      background-color: #f7f7f7;
      border-radius: 10px;
      .configure_page {
        .right_btn {
          text-align: right;
          margin-bottom: 15px;
        }
        .center_btn {
          text-align: center;
        }
        .menu_content {
          padding: 0 10px;
          .el-radio + .el-radio {
            margin-left: 0;
          }
          .el-radio {
            margin-right: 10px;
            margin-bottom: 10px;
          }
          .el-form-item {
            margin-bottom: 0;
          }
        }
        .configur_content {
          margin-top: 20px;
          padding: 10px;
          background: #fff;
        }
        .material-info {
          .el-form-item {
            margin-bottom: 5px;
          }
          .material-img {
            width: 250px;
            height: 125px;
          }
        }
        .material-info-nothing {
          padding: 50px 0;
          color: #f56c6c;
          text-align: center;
        }
      }
    }
    // 未点击菜单编辑
    .no-weixin-menu {
      padding-top: 200px;
      color: #8d8d8d;
      text-align: center;
    }
  }
</style>

